<!--综合大屏-->
<template>
  <div class="largeScreen">
    <!--顶部区域-->
    <div class="largeScreen-top">
      <div class="top-information" id="top-information">
        <img src="@/assets/images/avatar.png" alt="" />
        {{ getAUsername() }}
      </div>
    </div>
    <!--车辆整体情况-->
    <div class="largeScreen-car">
      <div class="title">
        <img src="@/assets/images/car-title.png" alt="" />
      </div>
      <div class="car-chart">
        <div id="availableStatus"></div>
      </div>
      <div class="car-chart">
        <div id="numberOfDaysInTheCar"></div>
      </div>
      <div class="car-chart">
        <div id="availability"></div>
      </div>
      <div class="car-chart">
        <div id="dispatchStatus"></div>
      </div>
    </div>
    <!--中间区域-->
    <div class="largeScreen-middle">
      <!--综合整体情况-->
      <div class="middle-comprehensive">
        <div class="comprehensive-data">
          <div class="title">
            <img src="@/assets/images/comprehensive-title.png" alt="" />
          </div>
          <div class="data-chart">
            <div
              class="chart-item"
              v-for="item in integrateTheOverallPicture"
              :key="item.systemId"
            >
              <div class="item-statistics">
                <div class="card-numbers">{{ item.processCount }}</div>
                <div class="card-title">{{ item.systemName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="comprehensive-average">
          综合类流程处理时长和及时率
          <div class="average-list">
            <div
              class="list-item"
              v-for="item in integrateTheOverallPicture"
              :key="item.systemId"
            >
              <div class="item-title">{{ item.systemName }}</div>
              <div class="item-numbers">
                {{ millisecondsToHoursWithDecimals(item.processAvgTime)
                }}<span>h</span>
                <span>{{ item.timeliness }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--日常跟踪整体情况-->
      <div class="middle-daily">
        <div class="title">
          <img src="@/assets/images/daily-title.png" alt="" />
        </div>
        <div class="daily-chart">
          <div class="chart-left">
            <div id="dailyTracking"></div>
          </div>
          <div class="chart-right">
            <div id="satisfaction"></div>
          </div>
        </div>
      </div>
    </div>
    <!--调研督办整体情况-->
    <div class="largeScreen-survey">
      <div class="title">
        <img src="@/assets/images/survey-title.png" alt="" />
      </div>
      <div class="survey-chart">
        <div id="research"></div>
      </div>
      <div class="survey-table">
        <div class="table-title">全省调研数据</div>
        <div class="table-content">
          <el-table :data="tableData" style="width: 100%" height="100%" stripe>
            <el-table-column
              prop="yearMonth"
              label="调研日期"
              min-width="4"
              align="center"
              :formatter="timeFormatting"
            />
            <el-table-column
              prop="unitName"
              label="调研单位/领导"
              min-width="6"
              align="center"
            />
            <el-table-column
              prop="toResearchDeptName"
              label="基层单位"
              min-width="6"
              align="center"
            />
          </el-table>
        </div>
        <div class="table-pagination">
          <el-pagination
            layout="prev, pager, next"
            :total="defaultParameter.total"
            @current-change="pageTurning"
          />
        </div>
      </div>
      <div class="survey-overseeing">
        <div id="supervisionAndSupervision"></div>
      </div>
    </div>
    <!--底部区域-->
    <div class="largeScreen-bottom">
      <largeScreenBottom></largeScreenBottom>
    </div>
    <div class="largeScreen-bottom">
      <segmentBusiness></segmentBusiness>
    </div>
  </div>
</template>

<script setup>
import largeScreenBottom from "@/components/LargeScreen/largeScreenBottom.vue";
import segmentBusiness from "@/components/LargeScreen/segmentBusiness.vue";
import * as echarts from "echarts";
import { TIMELINESS } from "@/utils/configureTheObject.js";
import { EChart } from "@/utils/echartsClass";
const timeConversion = 1000 * 60 * 60; //毫秒转小时的倍数
import { markRaw, onMounted, ref } from "vue";
import moment from "moment";
import {
  getSynthesisWorkInfo,
  getTraceInfos,
  getSuperviseInfo,
  getResearchInfos,
  getUnitResearchCount,
  getUnitVehicleUseInfo,
  getUnitProdVehicleUseInfo,
} from "@/api/integratedLargeScreen";
const fontSize = ref(null); //当前字体大小
/**
 * 获取用户名
 */
const getAUsername = () => {
  return JSON.parse(sessionStorage.getItem("user")).nickName;
};
//综合整体情况数据
const integrateTheOverallPicture = ref([]);
/**
 * 将毫秒转换成小时，并且保留两位小数
 * @param value 毫秒
 * @returns {number}  小时数
 */
const millisecondsToHoursWithDecimals = (value) => {
  const hours = value / timeConversion;
  return parseFloat(hours.toFixed(2));
};
const tableData = ref([]); //全省调研数据
const defaultParameter = ref({ limit: 4, page: 1, total: 0 }); //分页查询默认参数
/**
 * 格式化时间
 * @param row 日期
 * @returns {string} 格式好的时间
 */
const timeFormatting = (row) => {
  return moment(row.yearMonth).format("yyyy-MM-DD");
};
/**
 * 分页切换
 * @param value 当前页数
 * @returns {Promise<void>}
 */
const pageTurning = async (value) => {
  defaultParameter.value.page = value;
  const { data } = await getResearchInfos(defaultParameter.value);
  tableData.value = data.list;
};
const unitVehicleUseInfoData = ref([]); //车辆可用状态和用车天数
const availableStatus = () => {
  const chartObj = new EChart({
    id: "availableStatus",
    fontSize: fontSize.value,
  });
  chartObj.xAxis.data = unitVehicleUseInfoData.value.map(
    (item) => item.companyName,
  );
  chartObj.series[0].data = unitVehicleUseInfoData.value.map((item) => item.canUseCount),
  chartObj.setOption();
};
const availableStatusEcharts = () => {
  const myChart = echarts.init(document.getElementById("availableStatus"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "各单位车辆可用状态",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      data: unitVehicleUseInfoData.value.map((item) => item.companyName),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick: {
        show: false, //  刻度线
      },
    },
    yAxis: {
      type: "value",
      name: "单位：辆",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
    },
    series: [
      {
        name: "辆",
        type: "bar",
        data: unitVehicleUseInfoData.value.map((item) => item.usageDays),
        showBackground: true, //显示背景颜色
        backgroundStyle: {
          color: "#1C275E",
        }, //柱形图背景色
        barWidth: "8", //柱形图宽度
        itemStyle: {
          normal: {
            barBorderRadius: [4, 4, 0, 0], //柱体圆角
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#1B65CD",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#03DFFC",
              },
            ]),
          },
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //各单位车辆可用状态
const numberOfDaysInTheCarEcharts = () => {
  const myChart = echarts.init(document.getElementById("numberOfDaysInTheCar"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "各单位用车里程数",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      boundaryGap: false, //坐标轴两边留白策略
      data: unitVehicleUseInfoData.value.map((item) => item.companyName),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "#0e275c",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：里程",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
    },
    series: [
      {
        name: "里程",
        type: "line",
        data: unitVehicleUseInfoData.value.map((item) => item.usageDays),
        itemStyle: {
          borderWidth: 5, //  拐点边框宽度
          color: "#0F80F4",
        },
        emphasis: {
          itemStyle: {
            color: "#48FFF1", //这里设置的拐点颜色
            borderColor: "#48FFF1",
            borderWidth: 5, //  拐点边框宽度
          },
        },
        lineStyle: {
          color: "#0F80F4",
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //各单位车辆可用状态
const unitProdVehicleUseInfoData = ref([]); //用车情况和派单情况数据
const availabilityEcharts = () => {
  const myChart = echarts.init(document.getElementById("availability"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "车辆管理情况",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      data: unitProdVehicleUseInfoData.value.map((item) => item.companyName),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：辆",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
      splitLine: {
        //刻度线
        show: true,
        lineStyle: {
          color: "#0e275c",
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "辆",
        type: "bar",
        data: unitProdVehicleUseInfoData.value.map((item) => item.useSum),
        barWidth: "30%", //柱形图宽度
        itemStyle: {
          normal: {
            barBorderRadius: [10], //柱体圆角
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#188AFF ",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#2E5FB9",
              },
            ]),
          },
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //生产经营用车情况
const dispatchStatusEcharts = () => {
  const myChart = echarts.init(document.getElementById("dispatchStatus"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "生产经营用车平均派单情况",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      boundaryGap: false, //坐标轴两边留白策略
      data: unitProdVehicleUseInfoData.value.map((item) => item.companyName),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "#0e275c",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：辆",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
    },
    series: [
      {
        name: "辆",
        type: "line",
        symbol: "circle",
        data: unitProdVehicleUseInfoData.value.map(
          (item) => item.avgSendOrdersSum,
        ),
        itemStyle: {
          borderWidth: 5, //  拐点边框宽度
          color: "#0F80F4",
          borderType: "solid",
        },
        emphasis: {
          itemStyle: {
            color: "#48FFF1", //这里设置的拐点颜色
            borderColor: "#48FFF1",
            borderWidth: 5, //  拐点边框宽度
          },
        },
        lineStyle: {
          color: "#0F80F4",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              //代表渐变色从正上方开始
              offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
              color: "#072B6B",
            }, //柱图渐变色
            {
              //代表渐变色从正上方开始
              offset: 0.5, //offset范围是0~1，用于表示位置，0是指0%处的颜色
              color: "#56B2F4",
            }, //柱图渐变色
            {
              offset: 1, //指100%处的颜色
              color: "#0B3374",
            },
          ]),
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //生产经营用车平均派单情况
const unitResearch = ref([]); //各单位调研情况图表数据
const researchEcharts = () => {
  const myChart = echarts.init(document.getElementById("research"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "专题调研报告",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      data: Object.keys(unitResearch.value).map((item) => {
        return item.replace(REGULAR_EXPRESSION, "");
      }),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick: {
        show: false, //  刻度线
      },
    },
    yAxis: {
      type: "value",
      name: "单位：个",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
    },
    series: [
      {
        type: "bar",
        tooltip: {
          show: false, //禁用当前图表的悬浮窗
        },
        // 只有一个数据点，值为原数据中的最大值
        data: new Array(Object.values(unitResearch.value).length).fill(
          Math.max(...Object.values(unitResearch.value)),
        ),
        // 背景颜色
        itemStyle: {
          color: "#1C275E", // 自定义背景颜色
        },
        // 宽度覆盖整个x轴
        barWidth: "20",
        // 保证背景在所有柱子之后
        z: 0,
        // 不显示柱子上的标签
        showBackground: false,
        // 隐藏该系列的y轴刻度和标签
        silent: true,
        // 确保背景条不响应鼠标事件
        emphasis: {
          disabled: true,
        },
      },
      {
        name: "个",
        type: "bar",
        data: Object.values(unitResearch.value),
        barGap: "-70%",
        barWidth: "8", //柱形图宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#40CFFF",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "rgba(88,184,252,0)",
              },
            ]),
          },
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //各单位调研情况图表
const superviseTheSituation = ref([]); //13710 督办情况数据
const REGULAR_EXPRESSION = new RegExp("分公司"); //删除名称含有分公司几个字
const supervisionAndSupervisionEcharts = () => {
  const myChart = echarts.init(
    document.getElementById("supervisionAndSupervision"),
  );
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    legend: {
      //图例
      data: ["需办理数量", "超时数量", "延期数量"],
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
      itemGap: 30,
      itemWidth: 15,
      itemHeight: 15,
      bottom: "2%",
    },
    title: {
      text: "13710 督办情况",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "13%",
      top: "8%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.45)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "rgba(255,255,255,0.45)",
          fontSize: fontSize.value,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.09)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        axisLabel: {
          //y轴文本
          color: "#A0AEC0",
          fontSize: fontSize.value,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          //y轴线
          show: false,
        },
        data: superviseTheSituation.value.map((item) => item.companyName),
      },
    ],
    series: [
      {
        name: "需办理数量",
        label: {
          show: false,
        },
        stack: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#1B63CC",
              },
              {
                offset: 1,
                color: "#03DFFC",
              },
            ]),
          },
        },
        type: "bar",
        barWidth: "12", //柱型宽度
        data: superviseTheSituation.value.map((item) => item.todoTaskCount),
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "超时数量",
        label: {
          show: false,
        },
        stack: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#05A998",
              },
              {
                offset: 1,
                color: "#63FBFC",
              },
            ]),
          },
        },
        type: "bar",
        barWidth: "12", //柱型宽度
        data: superviseTheSituation.value.map((item) => item.overdueCount),
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "延期数量",
        label: {
          show: false,
        },
        stack: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#2D5CBD",
              },
              {
                offset: 1,
                color: "#63FBFC",
              },
            ]),
          },
        },
        type: "bar",
        barWidth: "12", //柱型宽度
        data: superviseTheSituation.value.map((item) => item.extendedCount),
        emphasis: {
          focus: "series",
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //13710 督办情况
const dailyTracking = ref({}); //日常跟踪情况数据
const dailyTrackingEcharts = () => {
  const myChart = echarts.init(document.getElementById("dailyTracking"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    },
    title: {
      text: "日常跟踪情况",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    }, //图表标题
    grid: {
      //位置修改
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      data: Object.keys(dailyTracking.value.unitInfo),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
        interval: 0, //设置文本标签全部显示
        rotate: 30, // X轴标签文字倾斜30度
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick: {
        show: false, //  刻度线
      },
    },
    yAxis: {
      type: "value",
      name: "单位：个",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize.value,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize.value,
        },
      },
    },
    series: [
      {
        name: "个",
        type: "bar",
        data: Object.values(dailyTracking.value.unitInfo),
        showBackground: true, //显示背景颜色
        backgroundStyle: {
          color: "#1C275E",
        }, //柱形图背景色
        barWidth: "16", //柱形图宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#3699FE",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#4EC8EA",
              },
            ]),
          },
        },
      },
      {
        type: "pictorialBar",
        tooltip: {
          show: false, //禁用当前图表的悬浮窗
        },
        itemStyle: {
          normal: {
            color: "#1C275E",
          },
        },
        symbolRepeat: "fixed",
        symbolMargin: 5,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [16, 3],
        symbolPosition: "start",
        data: Object.values(dailyTracking.value.unitInfo),
        width: 2,
        z: 11,
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //日常跟踪情况
const OUTER_RING_COLOR = {
  非常满意: "#04DFFD",
  满意: "#0091FF",
  基本满意: "#202cfa",
  不满意: "#7257FF",
}; //满意度外圈颜色
const INNER_RING_COLOR = {
  非常满意: "#038bb5",
  满意: "#025db6",
  基本满意: "#1521b3",
  不满意: "#453bb6",
}; //满意度内圈颜色
const transformData = (data, color) => {
  return Object.entries(data).map(([key, value]) => ({
    value,
    name: key,
    itemStyle: {
      color: color[key],
    },
  }));
};
const satisfactionEacharts = () => {
  const myChart = echarts.init(document.getElementById("satisfaction"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    title: {
      text: "日常跟踪情况满意度占比",
      textStyle: {
        fontSize: fontSize.value,
        color: "#fff",
      },
    },
    legend: {
      bottom: "1%",
      icon: "circle",
      left: "center",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      width: "100%",
      height: "100%",
      textStyle: {
        rich: {
          a: { color: "#A5A9BF", fontSize: fontSize.value },
          b: { color: "#fff", fontSize: fontSize.value },
        },
      },
      formatter: (value) => {
        return `{a|${value}}    {b|${dailyTracking.value.satisfactionPercentage[value]}%}`;
      },
    },
    tooltip: {
      show: true,
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
      formatter: (params) => {
        return params.marker + " " + params.name + " " + params.value + "%";
      },
    },
    series: [
      {
        type: "pie",
        radius: ["35%", "55%"],
        center: ["40%", "40%"],
        z: 10,
        data: transformData(
          dailyTracking.value.satisfactionPercentage,
          OUTER_RING_COLOR,
        ),
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
      },
      {
        type: "pie",
        radius: ["25%", "35%"],
        center: ["40%", "40%"],
        label: {
          show: false,
        },
        data: transformData(
          dailyTracking.value.satisfactionPercentage,
          INNER_RING_COLOR,
        ),
        labelLine: {
          show: false,
        },
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
}; //日常跟踪情况满意度占比
const COMPANY_RESEARCH = {
  省公司: 0,
  杭州分公司: 0,
  宁波分公司: 0,
  温州分公司: 0,
  台州分公司: 0,
  金华分公司: 0,
  绍兴分公司: 0,
  嘉兴分公司: 0,
  湖州分公司: 0,
  衢州分公司: 0,
  丽水分公司: 0,
  舟山分公司: 0,
};
const initialize = async () => {
  const [
    synthesisWorkInfo,
    traceInfos,
    superviseInfo,
    researchInfos,
    unitResearchCount,
    unitVehicleUseInfo,
    unitProdVehicleUseInfo,
  ] = await Promise.all([
    getSynthesisWorkInfo(),
    getTraceInfos(),
    getSuperviseInfo(),
    getResearchInfos(defaultParameter.value),
    getUnitResearchCount(),
    getUnitVehicleUseInfo(),
    getUnitProdVehicleUseInfo(),
  ]);
  integrateTheOverallPicture.value = synthesisWorkInfo.data.map((item) => ({
    ...item,
    timeliness: TIMELINESS[item.systemId],
  })); //获取综合工单信息
  dailyTracking.value = traceInfos.data; //获取日常跟踪整体情况
  superviseTheSituation.value = superviseInfo.data; //13710 督办情况
  tableData.value = researchInfos.data.list;
  defaultParameter.value.total = researchInfos.data.total;
  unitResearch.value = { ...COMPANY_RESEARCH, ...unitResearchCount.data };
  unitVehicleUseInfoData.value = unitVehicleUseInfo.data;
  unitProdVehicleUseInfoData.value = unitProdVehicleUseInfo.data;
};
const information = ref(null); //大屏文字DOM
/**
 * 加载图表
 */
const chartLoading = () => {
  //availableStatusEcharts(); //各单位车辆可用状态图表
  availableStatus(); //各单位车辆可用状态
  numberOfDaysInTheCarEcharts(); //各单位用车天数图表
  availabilityEcharts(); //生产经营用车情况
  dispatchStatusEcharts(); //生产经营用车平均派单情况
  researchEcharts(); //各单位调研情况图表
  supervisionAndSupervisionEcharts(); //13710 督办情况
  dailyTrackingEcharts(); //日常跟踪情况
  satisfactionEacharts(); //日常跟踪情况满意度占比
};
onMounted(async () => {
  information.value = document.getElementById("top-information");
  fontSize.value = window
    .getComputedStyle(information.value)
    .fontSize.replace("px", ""); //当前字体大小
  await initialize();
  chartLoading();
  window.addEventListener("resize", () => {
    fontSize.value = window
      .getComputedStyle(information.value)
      .fontSize.replace("px", "");
    chartLoading();
  });
});
</script>
<style scoped lang="less">
@font-face {
  font-family: "PangMenZhengDao"; //创建一个number_font字体名称
  src: url("@/assets/font/PangMenZhengDao.ttf"); //引入本地字体源文件
}
.largeScreen {
  width: 100vw;
  height: auto;
  font-size: 25px;
  background: url(@/assets/images/bg.png) no-repeat top/cover;
  display: flex;
  flex-wrap: wrap;
  .title {
    img {
      height: 27px;
    }
  }
  //顶部区域
  .largeScreen-top {
    width: 1920px;
    height: 75px;
    margin-bottom: 22px;
    background: url(@/assets/images/top.png) no-repeat top/cover;
    display: flex;
    align-items: center;
    justify-content: end;
    .top-information {
      width: 150px;
      font-size: 12px;
      color: #76b7ff;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
      display: flex;
      align-items: center;
      column-gap: 10px;
      img {
        height: 36px;
      }
    }
  }
  //中间区域
  .largeScreen-middle {
    width: 860px;
    height: 965px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
    .middle-comprehensive {
      width: 860px;
      height: 531px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px 47px;
      .comprehensive-data {
        width: 100%;
        height: 372px;
        background: url(@/assets/images/comprehensive.png) no-repeat
          center/424px 372px;
        .data-chart {
          height: 308px;
          display: flex;
          flex-wrap: wrap;
          align-content: start;
          .chart-item {
            height: 74px;
            color: #ffffff;
            .card-numbers {
              font-family: "PangMenZhengDao", system-ui;
              font-size: 24px;
              margin-bottom: 6px;
            }
            .card-title {
              opacity: 0.6;
              font-size: 14px;
            }
            .item-statistics {
              width: 199px;
              height: 74px;
            }
            &:nth-child(5),
            &:nth-child(3),
            &:nth-child(1) {
              width: 50%;
              .item-statistics {
                padding: 12px 0 12px 84px;
              }
            }
            &:nth-child(2),
            &:nth-child(4) {
              width: 50%;
              .item-statistics {
                padding: 12px 84px 12px 0;
                text-align: end;
              }
            }
            &:nth-child(1) {
              width: 100%;
              display: flex;
              justify-content: center;
              margin-bottom: 12px;
              .item-statistics {
                background: url(@/assets/images/statistics.png) no-repeat
                  top/100%;
              }
            }
            &:nth-child(2) {
              display: flex;
              justify-content: end;
              padding-right: 120px;
              margin-bottom: 52px;
              .item-statistics {
                background: url(@/assets/images/research.png) no-repeat top/100%;
              }
            }
            &:nth-child(3) {
              padding-left: 120px;
              margin-bottom: 52px;
              .item-statistics {
                background: url(@/assets/images/dailyTracking.png) no-repeat
                  top/100%;
              }
            }
            &:nth-child(4) {
              display: flex;
              justify-content: end;
              padding-right: 150px;
              .item-statistics {
                background: url(@/assets/images/overseeing.png) no-repeat
                  top/100%;
              }
            }
            &:nth-child(5) {
              padding-left: 150px;
              .item-statistics {
                background: url(@/assets/images/businessHospitality.png)
                  no-repeat top/100%;
              }
            }
          }
        }
      }
      .comprehensive-average {
        width: 100%;
        height: 139px;
        background: url(@/assets/images/average.png) no-repeat top/cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 16px;
        font-size: 16px;
        color: #e7e6e6;
        letter-spacing: 0.59px;
        font-weight: 400;
        padding: 16px 30px;
        .average-list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .list-item {
            width: 130px;
            height: 70px;
            background: url(@/assets/images/item.png) no-repeat top/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            row-gap: 7px;
            .item-title {
              font-size: 14px;
              color: #55e5fe;
              letter-spacing: 0.52px;
            }
            .item-numbers {
              font-family: "PangMenZhengDao", system-ui;
              font-size: 20px;
              color: #ffffff;
              letter-spacing: 0.74px;
              span {
                font-size: 12px;
                color: #a5a9bf;
                letter-spacing: 0.44px;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
    .middle-daily {
      width: 100%;
      height: 404px;
      padding: 26px 36px;
      background: url(@/assets/images/daily.png) no-repeat top/100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .daily-chart {
        height: 281px;
        display: flex;
        column-gap: 30px;
        .chart-left {
          width: 563px;
          #dailyTracking {
            width: 100%;
            height: 100%;
          }
        }
        .chart-right {
          width: 243px;
          #satisfaction {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  //车辆整体情况
  .largeScreen-car,
  //调研督办整体情况
  .largeScreen-survey {
    width: 469px;
    height: 953px;
    margin: 0 30px 30px;
    padding: 24px 16px;
    background: url(@/assets/images/chart.png) no-repeat top/cover;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    .car-chart {
      height: 189px;
      #availableStatus,
      #numberOfDaysInTheCar,
      #availability,
      #dispatchStatus {
        width: 100%;
        height: 100%;
      }
    }
    .survey-chart {
      height: 189px;
      #research {
        width: 100%;
        height: 100%;
      }
    }
    .survey-table {
      height: 237px;
      .table-title {
        font-size: 14px;
        color: #ffffff;
        font-weight: 400;
        margin-bottom: 16px;
        height: 19px;
      }
      .table-content {
        height: 167px;
        :deep(.el-table__inner-wrapper) {
          background-color: #032c6c;
          --el-table-header-bg-color: #023979;
          --el-table-tr-bg-color: #021d60;
          --el-fill-color-lighter: #032c6c;
          --el-table-header-text-color: #fff;
          --el-table-row-hover-bg-color: #021d60;
          --el-table-border-color: #021d60;
          .el-table__header {
            height: 27px;
            .cell {
              font-size: 14px;
              color: #ffffff;
              font-weight: 400;
            }
          }
          .el-table__row--striped {
            --el-table-row-hover-bg-color: #032c6c;
          }
          .el-table__cell {
            height: 33.1px;
            padding: 0;
            border: none;
            .cell {
              font-size: 14px;
              color: #ffffff;
              font-weight: 400;
              line-height: normal;
            }
          }
        }
      }
      .table-pagination {
        height: 35px;
        background: rgba(3, 157, 206, 0.1);
        display: flex;
        justify-content: end;
        :deep(.el-pagination) {
          --el-pagination-button-disabled-bg-color: rgba(3, 157, 206, 0);
          --el-pagination-bg-color: rgba(3, 157, 206, 0);
          --el-pagination-button-color: #fff;
          li {
            font-size: 14px;
            color: #a5a9bf;
            font-weight: 400;
          }
          li.is-active.number {
            color: #fff;
          }
        }
      }
    }
    .survey-overseeing {
      height: 378px;
      #supervisionAndSupervision {
        width: 100%;
        height: 100%;
      }
    }
  }
  //大屏底部
  .largeScreen-bottom {
    width: 1920px;
    aspect-ratio: 2557/534;
    padding: 24px 26px;
    margin: 0 20px 20px;
    background: url(@/assets/images/largeScreenBottom.png) no-repeat top/100%;
    display: flex;
  }
}
</style>
